<template>
    <div class="main-container">
        <x-header style="background: #34bd7ed1" :right-options="{showMore: true}"
                  :left-options="{backText: '',color:'#fff'}">报告查询
        </x-header>
        <div>
            <flexbox class="flexbox-container">
                <FlexboxItem>
                    <div class="tab-container">时间</div>
                </FlexboxItem>
                <FlexboxItem>
                    <div class="tab-container">类型</div>
                </FlexboxItem>
            </flexbox>
        </div>
        <div class="list-container">
           <div class="list-box" @click="goLink">
               <div class="top-box">
                   <flexbox>
                       <FlexboxItem>
                           <div class="left-text font-size-14" style="color: #333"
                           >24小时动态心电图</div>
                       </FlexboxItem>
                       <FlexboxItem>
                           <div class="right-text font-size-13  color-grey-ccc">2016-04-21</div>
                       </FlexboxItem>

                   </flexbox>
               </div>
               <div class="bottom-box">
                   <flexbox>
                       <FlexboxItem>
                           <div class="left-text font-size-13 color-grey-ccc">紫阳街道社区卫生服务中心</div>
                       </FlexboxItem>
                       <FlexboxItem>
                           <div class="right-text font-size-13 color-grey-ccc">检查</div>
                       </FlexboxItem>

                   </flexbox>
               </div>
           </div>
            <div class="list-box">
                <div class="top-box">
                    <flexbox>
                        <FlexboxItem>
                            <div class="left-text font-size-14" style="color: #333"
                            >24小时动态心电图</div>
                        </FlexboxItem>
                        <FlexboxItem>
                            <div class="right-text font-size-13  color-grey-ccc">2016-04-21</div>
                        </FlexboxItem>

                    </flexbox>
                </div>
                <div class="bottom-box">
                    <flexbox>
                        <FlexboxItem>
                            <div class="left-text font-size-13 color-grey-ccc">紫阳街道社区卫生服务中心</div>
                        </FlexboxItem>
                        <FlexboxItem>
                            <div class="right-text font-size-13 color-grey-ccc">检查</div>
                        </FlexboxItem>

                    </flexbox>
                </div>
            </div>
            <div class="list-box">
                <div class="top-box">
                    <flexbox>
                        <FlexboxItem>
                            <div class="left-text font-size-14" style="color: #333"
                            >24小时动态心电图</div>
                        </FlexboxItem>
                        <FlexboxItem>
                            <div class="right-text font-size-13  color-grey-ccc">2016-04-21</div>
                        </FlexboxItem>

                    </flexbox>
                </div>
                <div class="bottom-box">
                    <flexbox>
                        <FlexboxItem>
                            <div class="left-text font-size-13 color-grey-ccc">紫阳街道社区卫生服务中心</div>
                        </FlexboxItem>
                        <FlexboxItem>
                            <div class="right-text font-size-13 color-grey-ccc">检查</div>
                        </FlexboxItem>

                    </flexbox>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import {Group, Cell, XHeader, Swiper, Grid, GridItem, GroupTitle, Icon, Flexbox, FlexboxItem} from 'vux'

    export default {
        components: {
            Swiper,
            XHeader,
            Group,
            Grid,
            Flexbox,
            FlexboxItem,
            GroupTitle,
            Icon,
            GridItem,
            Cell,
        },
        data() {
            return {
                // note: changing this line won't causes changes
                // with hot-reload because the reloaded component
                // preserves its current state and we are modifying
                // its initial state.
                iconfont: 'iconfont',
                msg: 'Hello World!',
                swiperList: [
                    {
                        url: 'javascript:',
                        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
                        title: '测试banner1'
                    }, {
                        url: 'javascript:',
                        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
                        title: '测试banner2'
                    }
                ],
                gridList: [
                    {
                        title: "就诊记录",
                        icon: "iconbingzhi-copy",
                    }, {
                        title: "预约挂号",
                        icon: "iconyijian",
                    }, {
                        title: "报告查询",
                        icon: "iconhuanzhegoutong",
                    }, {
                        title: "健康证明",
                        icon: "iconjingshenxinlike",
                    }, {
                        title: "门诊费用",
                        icon: "iconwodegongzuoshi",
                    }, {
                        title: "中医体质",
                        icon: "iconzhongyike",
                    }
                ]
            }
        },
        methods: {
            goLink() {
                this.$router.push('/Detail');
            }
        }

    }
</script>

<style scoped>
    .main-container {
        width: 100vw;
        height: 100vh;
        background: url("../../static/image/bg.png") repeat-y;
        background-size: contain;

    }

    .vux-header .vux-header-right > a {
        color: #fff !important;
    }

    .vux-header .vux-header-left .left-arrow:before {
        border-color: #fff !important;

    }

    .flexbox-container {
        position: relative;
        border-bottom: 1px solid #ccc;
    }

    .flexbox-container::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        width: 1px;
        height: 20px;
        background: #ccc;
    }

    .right-text{
        text-align: right;
    }
    .left-text{
        text-align: left;
    }
    .tab-container {
        text-align: center;
        padding: 10px 0;
        color: #333;
        font-size: 14px;
        background: #fff;
    }


    .list-container .list-box{
        padding: 15px 10px;
        border-bottom: 1px solid #ddd;
    }
    .list-container .top-box{
        margin-bottom: 15px;
    }

    .font-size-14{
        font-size: 14px;
    }

    .font-size-13{
        font-size: 13px;
    }
    .color-grey-ccc{
        color:#ccc
    }
</style>
